<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		 <u-navbar
		     class="goshop-release-navbar"
			:title="postText"
			:bgColor="bgColor"
			:titleStyle="{'font-weight':700,'color':'#fff'}"
			@rightClick="rightClick"
			:autoBack="true"
		>
		</u-navbar>
		<view class="gohop-post-release">
			<view class="goshop-post-content">
				<u--textarea confirmType="done" v-model="form.content" height="130" :placeholder="saysomethingText" ></u--textarea>
			</view>
			<view class="goshop-post-upload u-m-t-20">
				<u-upload
					:fileList="fileListVideo"
					@afterRead="afterRead"
					@delete="deletePic"
					style="flex: 0;"
					name="Video"
					:maxCount="1"
					accept="video">
					<view style="width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;background-color: #f4f5f7;">
						<view class="iconfont iconfont-video icon-size"></view>
					</view>
				</u-upload>
				<u-upload
						:fileList="fileListImg"
						@afterRead="afterRead"
						@delete="deletePic"
						style="margin-left: 10rpx;"
						name="Img"
						multiple
						:maxCount="3">
						<view style="width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;background-color: #f4f5f7;">
							<view class="iconfont iconfont-camera icon-size"></view>
						</view>
					</u-upload>
			</view>
			<view class="goshop-post-other u-m-t-20">
				<view class="goshop-post-other-item">
					<view class="goshop-post-other-left">
						<view class="iconfont iconfont-category"></view>
						<view class="u-m-l-10">
							{{classifyText}}
						</view>
					</view>
					<view class="goshop-post-other-right" @tap="postCategoryShow = true">
						<view>{{selectCategory?selectCategory:pleasechooseText}}</view>
						<view class="iconfont iconfont-right_arrow icon-bg-color"></view>
					</view>
				</view>
			</view>
			<view class="goshop-post-submit">
				<u-button type="error" @click="submitForm" :text="confirmreleaseText"></u-button>
			</view>
			<u-action-sheet :actions="postCategoryDataList" @close="selectCategoryClose" :closeOnClickOverlay="true" :closeOnClickAction="true" @select="selectCategoryClick" :title="postCategoryTitle" :show="postCategoryShow"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	import {dictList,postInfo,createPost,updatePost} from '@/common/http.api.js'
	import {isEmpty,isNotEmpty} from '@/utils/utils';
	import config from '@/common/config';
	export default {
		data() {
			return {
				bgColor: '#ff5d50',
				postCategoryTitle:'',
				postCategoryShow:false,
				fileListImg: [],
				fileListVideo: [],
				postCategoryDataList:[],
				selectCategory:'',
				form:{
					id:'',
					content:'',
					categoryId:'',
					imgs:[],
					videos:[],
				},
				postText:'',
				createsuccessText:'',
				pleasechooseText:'',
				classifyText:'',
				categoryerrorText:'',
				categoryemptyText:'',
				updatesucessText:'',
				saysomethingText:'',
				confirmreleaseText:'',
				uploadloadingText:'',
				editpostText:'',
				contenterrorText:'',
			};
		},
		onLoad(e){
			this.getPostCategoryDict();
			if(e.id){
				this.postText=this.editpostText;
				this.form.id=e.id;
				this.getInfo();
			}	
		},
		onShow(){
		  this.refresh();	
		},
		methods:{
			refresh(){
				this.postText = this.$t('release.post.text');
				this.postCategoryTitle = this.$t('release.selecttype.text');
				this.createsuccessText = this.$t('release.createsuccess.text');
				this.pleasechooseText = this.$t('release.pleasechoose.text');
				this.classifyText = this.$t('release.classify.text');
				this.categoryerrorText = this.$t('release.categoryerror.text');
				this.categoryemptyText = this.$t('release.categoryempty.text');
				this.updatesucessText = this.$t('release.updatesucess.text');
				this.saysomethingText = this.$t('release.saysomething.text');
				this.confirmreleaseText = this.$t('release.confirmrelease.text');
				this.uploadloadingText = this.$t('common.uploadloading.text');
				this.editpostText = this.$t('release.editpost.text');
				this.contenterrorText = this.$t('release.contenterror.text');
			},
			getPostInfo(){
				postInfo({params: {id: this.form.id}}).then(res => {
					if (res.code === 0) {
						this.form = res.data;
						debugger
						if(isNotEmpty(this.form.categoryName)){
							this.selectCategory = this.form.categoryName;
						}
						for (let i = 0; i < this.form.imgs.length; i++) {
							let imgUrl = this.form.imgs[i];
							this.fileListImg.push( {
								status: 'success',
								message: '',
								url: imgUrl
							});
						}
						for (let i = 0; i < this.form.videos.length; i++) {
							let videoUrl = this.form.videos[i];
							this.fileListVideo.push( {
								status: 'success',
								message: '',
								url: videoUrl
							});
						}
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
						})
					}
				});
			},
			selectCategoryClick(index){
				debugger
				this.form.categoryId = index.id;
				this.selectCategory = index.name;
			},
			selectCategoryClose(){
			    this.postCategoryShow = false;
			},
			getPostCategoryDict(){
				let that = this;
				dictList({params:{type:'gs_post_type'}}).then(res => {
					if (res.code === 0) {
						this.postCategoryDataList = res.data;
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.categoryerrorText,
							type: 'error',
						})
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: that.uploadloadingText
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let json = JSON.parse(result);
					if(json.code === 0){
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: json.data
						}))
						fileListLen++
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/app/common/upload',
						filePath: url,
						name: 'file',
						header: {
							"tenant-id": config.tenantId //token校验
						},
						success: (res) => {
							setTimeout(() => {
								debugger
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			submitForm(){
				let that = this;
				if(isEmpty(this.form.content)){
					this.$refs.uToast.show({
						message: that.contenterrorText,
						type: 'error',
					})
					return;
				}
				if(isEmpty(this.form.categoryId)){
					this.$refs.uToast.show({
						message: that.categoryemptyText,
						type: 'error',
					})
					return;
				}
				for (let i = 0; i < this.fileListImg.length; i++) {
					let imgUrl = this.fileListImg[i];
					debugger
					this.form.imgs.push(imgUrl.url);
				}
				for (let i = 0; i < this.fileListVideo.length; i++) {
					let videoUrl = this.fileListVideo[i];
					debugger
					this.form.videos.push(videoUrl.url);
				}
				if(this.form.id){
					let that = this;
					updatePost(this.form).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.updatesucessText,
								type: 'success',
								complete() {
									uni.redirectTo({
										url: 'pages/common/post/post'
									})
								}
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
				}else{
					createPost(this.form).then(res => {
						if (res.code === 0) {
							this.$refs.uToast.show({
								message: that.createsuccessText,
								type: 'success',
								complete() {
									uni.redirectTo({
										url: 'pages/common/post/post'
									})
								}
							})
						} else {
							uni.hideLoading();
							this.$refs.uToast.show({
								message: res.msg,
								type: 'error',
							})
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.goshop-release-navbar{
	height: 88rpx;
}
.gohop-post-release{
	.goshop-post-title{
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;		
	}
	.goshop-post-content{
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;	
	}
	.goshop-post-upload{
		background-color: $goshop-color-auxiliary-one;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.goshop-post-other{
		display: flex;
		flex-direction: column;
		background-color: $goshop-color-auxiliary-one;
		padding: 30rpx;
		.goshop-post-other-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.goshop-post-other-left{
				display: flex;
				align-items: center;
			}
			.goshop-post-other-right{
				display: flex;
				align-items: center;
			}
		}
	}
	.goshop-post-submit{
		padding: 20rpx;
	}
}
</style>
